iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

白話JavaScript系列 第 6

Day06-Scope && Hoisting

  • 分享至 

  • xImage
  •  

前言

在程式語言中了解程式的周期是很重要的。

在昨日我們已經先了解variables的一些規則了,其中就有包含Scope的概念,讓我們來好好了解吧!!!

Scope Chain

  • 可以由內層讀取外層
  • 而外層不能讀取內層
  • function scope
  • global scope
function scope(){
  var a = 1
  console.log(a); //1
}
scope()
console.log(a)//ReferenceError: a is not defined

以上的程式碼中是正常的現象,相信大家經過昨日的變數區塊有稍微了解。
但以下的呢?

var a = 3
function scope(){
  console.log(a); 
}
scope()
console.log(a)

你能猜到嗎?

其實結果會輸出2個3

var a = 3
function scope(){
  console.log(a); //3
}
scope()
console.log(a)// 3

上面的tips中「可以由內層讀取外層」是很重要的觀念!!!

由於scope function中沒有定義a的變數,所以會一層一層往外查找,直到連global scope都沒有才會跑出reference error。

下面code就可以很清楚的了解function scope

var a = 3
function scope(){
  var a = 10
  function inner(){
    console.log(a) //10
  }
  inner()
}
scope()
console.log(a)// 3

由於inner funtion被呼叫執行console.log(a),但inner中沒有定義a的變數,所以往外查找,而看到scope中有定義a,於是很放心的就reference。

Hoisting

昨天的variables我們很明確的解釋了以下

  • var為寬鬆的變數宣告
  • 而let、const是嚴謹的並且為block scope

ok,你說那為什麼JavaScript要有這麼麻煩的現象???

function sayHi(para) {
  console.log(`Hello I'm ${para}`)
}

sayHi('Ian') //Hello I'm Ian

如果function都要由上而下從頭寫到尾,不能有任何差錯,並且都先宣告再使用其實對於開發是一件非常惱人的事情!!!

sayHi('Ian') //Hello I'm Ian

function sayHi(para) {
  console.log(`Hello I'm ${para}`)
}

最後總結一下

  • 使用let、const開發
  • var、let、const 、function都有hoisting,各自有各自的提升現象
  • 內層可以讀取外層變數,但外層不能存取內層
  • 後面我們都會使用let、const宣告

今天講得比較少,主要是小弟重感冒,等之後覺得需要補充,會再更新的/images/emoticon/emoticon02.gif


上一篇
Day05-Variables
下一篇
Day07-Loop
系列文
白話JavaScript28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言